<template>
    <main-header />
    <search-view :searchItem="searchItem" :loading="loading" @search="handleFinish" />
    <table-tool
        title="商品列表"
        :data="goodsList"
        v-model:columns="columns"
        :loading="loading"
        @reFresh="getGoodsList"
        @handleAdd="handleAdd"
        isExport
    >
        <template #content="{ column, text, record }">
            <template v-if="column.dataIndex === 'cover_url'">
                <a-image :width="50" :src="text" />
            </template>
            <template v-if="column.dataIndex === 'operation'">
                <a-button type="link" @click="getGoodsInfo(record)">编辑</a-button>
            </template>
            <template v-if="column.dataIndex === 'is_on'">
                <a-switch
                    v-model:checked="record.is_on"
                    checked-children="已上架"
                    un-checked-children="未上架"
                    @change="onChange(record)"
                />
            </template>
            <template v-if="column.dataIndex === 'is_recommend'">
                <a-switch
                    v-model:checked="record.is_recommend"
                    checked-children="推荐"
                    un-checked-children="未推荐"
                    @change="recommendChange(record)"
                />
            </template>
        </template>
    </table-tool>
    <table-pagination
        v-show="total > 0"
        @pagination="getGoodsList"
        v-model:page="page.current"
        v-model:pageSize="page.pageSize"
        :total="total"
    />
    <a-modal
        v-model:visible="modalShow"
        :title="!isEdit ? '增加商品' : '修改商品'"
        :footer="false"
        @cancel="resetGoodsForm"
    >
        <a-form
            v-if="modalShow"
            :model="goodsForm"
            ref="goodsFormRef"
            layout="vertical"
            @finish="goodsFormFinish"
        >
            <a-form-item
                name="category_id"
                label="分类"
                :rules="[{ required: true, message: '请选择分类' }]"
            >
                <a-cascader
                    v-model:value="goodsForm.category_id"
                    :options="categoryOptions"
                    placeholder="请选择分类"
                    allowClear
                    :fieldNames="{ label: 'name', value: 'id', children: 'children' }"
                />
            </a-form-item>
            <a-form-item
                name="title"
                label="商品名"
                :rules="[{ required: true, message: '请输入商品名' }]"
            >
                <a-input
                    v-model:value="goodsForm.title"
                    allow-clear
                    placeholder="请输入商品名"
                ></a-input>
            </a-form-item>
            <a-form-item
                name="description"
                label="商品描述"
                :rules="[{ required: true, message: '请输入商品描述' }]"
            >
                <a-input
                    v-model:value="goodsForm.description"
                    allow-clear
                    placeholder="请输入商品描述"
                ></a-input>
            </a-form-item>
            <a-form-item
                name="price"
                label="价格"
                :rules="[{ required: true, message: '请输入价格' }]"
            >
                <a-input
                    v-model:value="goodsForm.price"
                    allow-clear
                    placeholder="请输入价格"
                ></a-input>
            </a-form-item>
            <a-form-item
                name="stock"
                label="库存"
                :rules="[{ required: true, message: '请输入库存' }]"
            >
                <a-input
                    v-model:value="goodsForm.stock"
                    allow-clear
                    placeholder="请输入库存"
                ></a-input>
            </a-form-item>
            <a-form-item
                name="cover"
                label="封面图"
                :rules="[{ required: true, message: '请上传封面图' }]"
            >
                <oss-upload v-model:value="goodsForm.cover">
                    <a-button>
                        <upload-outlined></upload-outlined>
                        点击上传商品主图
                    </a-button>
                </oss-upload>
                <a-image v-if="isEdit" :src="goodsForm.cover_url" />
            </a-form-item>
            <a-form-item
                name="details"
                label="商品详情"
                :rules="[{ required: true, message: '请输入详情' }]"
            >
                <basic-editor v-model:value="goodsForm.details" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit" :loading="addLoading">{{
                    !isEdit ? '增加' : '修改'
                }}</a-button>
                <a-button style="margin-left: 10px" @click="resetGoodsForm">重置</a-button>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import {
    getGoodsListAPI,
    changGoodsOnAPI,
    addGoodsAPI,
    updateGoodsAPI,
    getCategoryInfoAPI,
    changGoodsRecommendAPI
} from '@/api/goods.js'
import { getCategoryListAPI } from '@/api/category.js'
const page = reactive({
    current: 1,
    pageSize: 10
})
const { proxy: _this } = getCurrentInstance()
const loading = ref(false)
const searchItem = ref([
    {
        label: '商品名',
        name: 'title',
        type: '0'
    },
    {
        label: '是否上架',
        name: 'is_on',
        type: '1',
        options: [
            { label: '上架', value: 1 },
            { label: '不上架', value: 0 }
        ]
    },
    {
        label: '是否推荐',
        name: 'is_recommend',
        type: '1',
        options: [
            { label: '推荐', value: 1 },
            { label: '不推荐', value: 0 }
        ]
    }
])
const total = ref(0)
const goodsList = ref([])
const columns = ref([
    {
        title: '商品图',
        dataIndex: 'cover_url'
    },
    {
        title: '商品名',
        dataIndex: 'title'
    },
    {
        title: '价格',
        dataIndex: 'price'
    },
    {
        title: '库存',
        dataIndex: 'stock'
    },
    {
        title: '销量',
        dataIndex: 'sales'
    },
    {
        title: '是否上架',
        dataIndex: 'is_on'
    },
    {
        title: '是否推荐',
        dataIndex: 'is_recommend'
    },
    {
        title: '创建时间',
        dataIndex: 'created_at'
    },
    {
        title: '操作',
        dataIndex: 'operation'
    }
])
const searchValue = ref({})
const handleFinish = (value) => {
    page.current = 1
    page.pageSize = 10
    searchValue.value = value
    getGoodsList()
}
const getGoodsList = async () => {
    loading.value = true
    const res = await getGoodsListAPI({ ...searchValue.value, ...page })
    res.data.forEach((item) => {
        item.is_on = item.is_on ? true : false
        item.is_recommend = item.is_recommend ? true : false
    })
    goodsList.value = res.data
    total.value = res.meta.pagination.total
    loading.value = false
}
//获取分类
const categoryOptions = ref([])
const getCategoryOptions = async () => {
    const res = await getCategoryListAPI()
    categoryOptions.value = res
}
onMounted(() => {
    getGoodsList()
    getCategoryOptions()
})
// 新增start
const modalShow = ref(false)
const isEdit = ref(false)
const goodsFormRef = ref()
const addLoading = ref(false)
const goodsForm = reactive({
    category_id: '',
    title: '',
    description: '',
    price: '',
    stock: '',
    cover: '',
    pics: '',
    details: '',
    cover_url: ''
})
const handleAdd = () => {
    modalShow.value = true
    isEdit.value = false
}
//确认
const goodsFormFinish = (value) => {
    value.category_id = value.category_id[value.category_id.length - 1]

    if (isEdit.value) {
        onEdit(value)
    } else {
        onAdd(value)
    }
}
//新增
const onAdd = (value) => {
    addLoading.value = true
    addGoodsAPI(value)
        .then((res) => {
            _this.$message.success('新增商品成功')
            addLoading.value = false
            modalShow.value = false
            getGoodsList()
        })
        .catch((err) => {})
}
const onEdit = (value) => {
    addLoading.value = true
    updateGoodsAPI(value, editId.value)
        .then((res) => {
            _this.$message.success('修改商品成功')
            addLoading.value = false
            modalShow.value = false
            getGoodsList()
        })
        .catch((err) => {})
}
//重置表单
const resetGoodsForm = () => {
    goodsForm.value = {}
    goodsFormRef.value.resetFields()
}
//编辑弹窗
const editId = ref('')
const getGoodsInfo = (row) => {
    editId.value = row.id
    modalShow.value = true
    isEdit.value = true
    getCategoryInfoAPI(row.id).then((res) => {
        const { category, title, description, price, stock, cover, pics, details, cover_url } = res
        goodsForm.title = title
        goodsForm.description = description
        goodsForm.price = price
        goodsForm.stock = stock
        goodsForm.cover_url = cover_url
        goodsForm.cover = cover
        goodsForm.details = details
        goodsForm.category_id = [category.pid, category.id]
    })
}
//新增end
//改变状态
const onChange = (row) => {
    changGoodsOnAPI(row.id).then((res) => {})
}
const recommendChange = (row) => {
    changGoodsRecommendAPI(row.id).then((res) => {})
}
</script>
<style scoped lang="scss"></style>
